<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8"/>
    <title>v-on:事件修饰符</title>
    <style>
        #div {
            background-color: red;
            width: 300px;
            height: 300px;
        }
    </style>
    <script src="js/vuejs-2.5.16.js"></script>
</head>

<body>
<div id="app">
    <form @submit.prevent action="http://www.itheima.com" method="post">
        <input type="submit" value="提交">
    </form>
    <!--<form action="http://www.itheima.com" method="post" onsubmit="return checkForm()">
        <input type="submit" value="提交">
    </form>-->
    <hr/>
    <div @mouseover="fun1" id="div">
        <textarea @mouseover.stop="fun2($event)">这是一个文件域</textarea>
    </div>
</div>
</body>
<script>
    //view model
    new Vue({
        el: "#app",
        methods: {
            fun1: function () {
                alert("鼠标悬停在div上了");
            },
            fun2: function (event) {
                alert("鼠标悬停在textarea上了");
            }
        }
    });


    //传统js方式
    function checkForm() {
        alert(1);
        //表单验证必须有一个明确的boolean类型返回值
        //在应用验证方法时必须加上 return  方法名称
        return false;
    }
</script>

</html>